<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MQTT数据展示</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/data.css">
</head>
<body>
    <div class="container">
        <h1>MQTT数据交互</h1>
        
        <!-- 连接状态和配置路径显示 -->
        <div class="config-display">
            <div class="status-box">
                <span class="status-label">连接状态:</span>
                <span class="status-value" id="connection-status">未连接</span>
            </div>
            <div class="topic-box">
                <span class="topic-label">订阅路径:</span>
                <span class="topic-value" id="subscribe-topic-display">未配置</span>
            </div>
            <div class="topic-box">
                <span class="topic-label">发布路径:</span>
                <span class="topic-value" id="publish-topic-display">未配置</span>
            </div>
        </div>
        
        <!-- 模块管理区域 -->
        <div class="module-management">
            <button id="add-module-btn">添加模块</button>
        </div>
        
        <!-- 模块展示区域 -->
        <div class="modules-container">
            <!-- 模块将通过JavaScript动态添加 -->
        </div>
                <button id="subscribe-btn">订阅</button>
                <div class="messages">
                    <h3>接收到的消息</h3>
                    <div id="message-list"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/mqtt.js"></script>
    <script src="./js/data.js"></script>
</body>
</html>